<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form-create frame组件Dome</title>
    <style>
        .fc-files {
            display: inline-block;
            width: 58px;
            height: 58px;
            text-align: center;
            line-height: 60px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
            margin-right: 4px;
            box-sizing: border-box;
        }

        .fc-files img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .fc-files.on {
            background: #40d0c3;
            padding: 1px;
        }
    </style>
</head>
<body>
<div class="fc-files"><img src="http://iph.href.lu/100x100?text=f&fg=ffffff&bg=cfe2f3"></div>
<div class="fc-files"><img src="http://iph.href.lu/100x100?text=o&fg=ffffff&bg=cfe2f3"></div>
<div class="fc-files"><img src="http://iph.href.lu/100x100?text=r&fg=ffffff&bg=cfe2f3"></div>
<div class="fc-files"><img src="http://iph.href.lu/100x100?text=m&fg=ffffff&bg=cfe2f3"></div>
<div class="fc-files"><img src="http://iph.href.lu/100x100?text=-&fg=ffffff&bg=cfe2f3"></div>
<div class="fc-files"><img src="http://iph.href.lu/100x100?text=c&fg=ffffff&bg=cfe2f3"></div>
<div class="fc-files"><img src="http://iph.href.lu/100x100?text=r&fg=ffffff&bg=cfe2f3"></div>
<div class="fc-files"><img src="http://iph.href.lu/100x100?text=e&fg=ffffff&bg=cfe2f3"></div>
<div class="fc-files"><img src="http://iph.href.lu/100x100?text=a&fg=ffffff&bg=cfe2f3"></div>
<div class="fc-files"><img src="http://iph.href.lu/100x100?text=t&fg=ffffff&bg=cfe2f3"></div>
<div class="fc-files"><img src="http://iph.href.lu/100x100?text=e&fg=ffffff&bg=cfe2f3"></div>
<div class="fc-files"><img src="http://iph.href.lu/100x100?text=d&fg=ffffff&bg=cfe2f3"></div>

<button id="closeBtn">关闭页面</button>
<button onclick="onUnload()">立即修改</button>

<script>
    window.onload = function () {

        setTimeout(function () {
            //获取fodder字段值
            var value = form_create_helper.get('fodder'),
                images = Array.from(self.document.getElementsByTagName('img'));
            //选中对应的图片
            images.forEach(function (image) {
                if (value.indexOf(image.src) !== -1) {
                    image.parentNode.classList.add('on');
                } else {
                    image.parentNode.classList.remove('on');
                }
                image.addEventListener('click', onClick)
            });

            function onClick() {
                var p = this.parentNode;
                if (Array.from(p.classList).indexOf('on') !== -1) {
                    p.classList.remove('on');
                } else {
                    p.classList.add('on');
                }
            }

            document.getElementById('closeBtn').addEventListener('click', function () {
                //手动关闭frame弹出框
                form_create_helper.close('fodder');
            });


            //当页面关闭时更新frame字段的值
            window.onUnload = function () {
                var list = [];
                images.forEach(function (image) {
                    if (Array.from(image.parentNode.classList).indexOf('on') !== -1) {
                        list.push(image.src);
                    }
                });

                //修改表单fodder字段的值
                form_create_helper.set('fodder', list);
            }
            window.onunload = onUnload;
        });
    }
</script>
</body>
</html>
